<route lang="json5">
{
  style: {
    navigationBarTitleText: '我的',
    navigationBarBackgroundColor: '#f8f8f8',
    navigationBarTextStyle: 'black',
    backgroundColor: '#f8f8f8',
    enableShareAppMessage: true,
  },
}
</route>

<template>
  <!-- 用户信息卡片 -->
  <view
    class="user-card"
    :style="{
      backgroundColor: settingsStore.themeLightColor,
      color: settingsStore.themeColor,
      fontSize: settingsStore.fontSize,
    }"
  >
    <view class="user-avatar-container">
      <image
        class="user-avatar"
        :src="userInfo.avatar || '/static/default-avatar.png'"
        mode="aspectFill"
      />
      <view
        v-if="!hasLogin"
        class="login-tip"
        @click="handleLogin"
        :style="{ backgroundColor: settingsStore.themeColor }"
      >
        点击登录
      </view>
    </view>

    <view class="user-info">
      <view class="username">{{ userInfo.name || '未登录用户' }}</view>
      <view class="userphone" v-if="userInfo.phone">{{ maskedPhone }}</view>
    </view>

    <view class="edit-btn" @click="handleProfileInfo">
      <wd-icon :color="settingsStore.themeColor" name="edit" size="18px" />
    </view>
  </view>

  <!-- 功能区块 -->
  <view class="function-container">
    <!-- 账号管理 -->
    <view
      class="function-section"
      :style="{
        backgroundColor: '#fff',
        fontSize: settingsStore.fontSize,
      }"
    >
      <view class="section-header">
        <wd-icon name="user" size="18px" :color="settingsStore.themeColor" />
        <text class="section-title">账号管理</text>
      </view>

      <view class="custom-cell" @click="handleProfileInfo">
        <wd-icon :color="settingsStore.themeColor" name="user" size="20px" />
        <view class="cell-content">
          <text class="cell-title" :style="{ fontSize: settingsStore.fontSize }">个人资料</text>
          <text class="cell-value" :style="{ fontSize: settingsStore.fontSize }">完善信息</text>
        </view>
        <wd-icon name="arrow-right" size="16px" :color="settingsStore.themeColor" />
      </view>
    </view>

    <!-- 系统设置 -->
    <view
      class="function-section"
      :style="{
        backgroundColor: '#fff',
        fontSize: settingsStore.fontSize,
      }"
    >
      <view class="section-header">
        <wd-icon name="setting" size="18px" :color="settingsStore.themeColor" />
        <text class="section-title">系统设置</text>
      </view>

      <view class="custom-cell" @click="handleSetting">
        <wd-icon :color="settingsStore.themeColor" name="setting" size="20px" />
        <view class="cell-content">
          <text class="cell-title" :style="{ fontSize: settingsStore.fontSize }">系统配置</text>
        </view>
        <wd-icon name="arrow-right" size="16px" :color="settingsStore.themeColor" />
      </view>

      <view class="custom-cell" @click="handleAbout">
        <wd-icon :color="settingsStore.themeColor" name="warning" size="20px" />
        <view class="cell-content">
          <text class="cell-title" :style="{ fontSize: settingsStore.fontSize }">关于我们</text>
        </view>
        <wd-icon name="arrow-right" size="16px" :color="settingsStore.themeColor" />
      </view>
    </view>
  </view>

  <!-- 底部操作按钮 -->
  <view class="action-container">
    <view
      class="custom-button"
      :class="hasLogin ? 'btn-error' : 'btn-primary'"
      @click="hasLogin ? handleLogout() : handleLogin()"
      :style="{
        backgroundColor: hasLogin ? '#ff4d4f' : settingsStore.themeColor,
        fontSize: settingsStore.fontSize,
        boxShadow: '0 10rpx 20rpx ' + (hasLogin ? '#ff4d4f33' : settingsStore.themeColor + '33'),
      }"
    >
      <text class="btn-text">{{ hasLogin ? '退出登录' : '立即登录' }}</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useUserStore } from '@/store'
import { useCheckInStore } from '@/store/checkData'
import { useToast } from 'wot-design-uni'
import { storeToRefs } from 'pinia'
import { useSettingsStore } from '@/store/settings'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const toast = useToast()
const hasLogin = ref(false)
const cacheSize = ref('0KB')
const checkInStore = useCheckInStore()
const settingsStore = useSettingsStore()

onShow(() => {
  isLogin()
  getCacheSize()
})

const isLogin = async () => {
  hasLogin.value = !!uni.getStorageSync('access_token')
  if (hasLogin.value) {
    await userStore.getUserInfo(userStore.userInfo.userId)
  }
}

const maskedPhone = computed(() => {
  const phone = userInfo.value.phone || ''
  return phone.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
})

const getCacheSize = () => {
  try {
    const res = uni.getStorageInfoSync()
    console.log('查看缓存大小', res)
    cacheSize.value = (res.currentSize / 1024).toFixed(2) + 'KB'
  } catch (e) {
    console.error('获取缓存大小失败', e)
  }
}

const handleLogin = async () => {
  uni.navigateTo({ url: '/pages/login/index' })
}

const handleProfileInfo = () => {
  if (!hasLogin.value) {
    toast.info('请先登录')
    return
  }
  uni.navigateTo({ url: '/pages/mine/info/index' })
}

const handleCompanyInfo = () => {
  if (!hasLogin.value) {
    toast.info('请先登录')
    return
  }
  uni.navigateTo({ url: '/pages/mine/inform/index' })
}

const handleAbout = () => {
  uni.navigateTo({ url: '/pages/mine/about/index' })
}

const handleClearCache = () => {
  uni.showModal({
    title: '清除缓存',
    content: '确定要清除所有缓存吗？\n清除后需要重新登录',
    success: (res) => {
      if (res.confirm) {
        try {
          uni.clearStorageSync()
          userStore.logout()
          isLogin()
          getCacheSize()
          toast.success('清除缓存成功')
        } catch {
          toast.error('清除缓存失败')
        }
      }
    },
  })
}

const handleSetting = () => {
  uni.navigateTo({ url: '/pages/mine/settings/index' })
}

const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        userStore.logout()
        hasLogin.value = false
        userStore.removeUserInfo()
        toast.success('退出登录成功')
        // 跳转首页或登录页
        // #ifdef MP-WEIXIN
        uni.reLaunch({ url: '/pages/index/index' })
        // #endif
        // #ifndef MP-WEIXIN
        uni.reLaunch({ url: '/pages/login/index' })
        // #endif
      }
    },
  })
}
onLaunch(() => {
  console.log('App Launch')
  // @ts-ignore: 2322
  uni.onShareAppMessage(() => {
    return {
      title: '佰汇签一签', // 默认标题
      path: '/pages/index/index', // 默认跳转路径
      imageUrl: '/static/logo.png', // 默认分享图片
    }
  })

  // 如果需要分享到朋友圈（微信小程序独有）
  // @ts-ignore: 2322
  uni.onShareTimeline(() => {
    return {
      title: '佰汇签一签',
      query: '', // 自定义参数
      imageUrl: '/static/logo.png',
    }
  })
})
</script>

<style lang="scss" scoped>
/* 全局样式 */
page {
  background-color: #f8f8f8;
}

/* 用户卡片 */
.user-card {
  position: relative;
  display: flex;
  align-items: center;
  padding: 30rpx;
  margin: 20rpx;
  background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%);
  border-radius: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;

  &:active {
    transform: translateY(5rpx);
    box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
  }
}

.user-avatar-container {
  position: relative;
  width: 120rpx;
  height: 120rpx;
  margin-right: 30rpx;
}

.user-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4rpx solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
}

.login-tip {
  position: absolute;
  bottom: -10rpx;
  left: 50%;
  transform: translateX(-50%);
  padding: 6rpx 20rpx;
  color: white;
  font-size: 22rpx;
  border-radius: 30rpx;
  white-space: nowrap;
  user-select: none;
}

.user-info {
  flex: 1;
}

.username {
  font-weight: bold;
  margin-bottom: 10rpx;
  color: inherit;
}

.userphone {
  color: #999;
}

.edit-btn {
  padding: 15rpx;
  border-radius: 50%;
  cursor: pointer;
}

/* 功能区块 */
.function-container {
  padding: 0 20rpx;
  margin-top: 40rpx;
}

.function-section {
  margin-bottom: 40rpx;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.03);
}

.section-header {
  display: flex;
  align-items: center;
  padding: 25rpx 30rpx;
  background-color: #fafafa;
  border-bottom: 1rpx solid #f0f0f0;
}

.section-title {
  margin-left: 15rpx;
  font-size: 30rpx;
  font-weight: 500;
  color: #666;
}

/* 自定义 cell 样式 */
.custom-cell {
  display: flex;
  align-items: center;
  padding: 25rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.3s ease;

  &:last-child {
    border-bottom: none;
  }

  &:active {
    background-color: #f0f0f0;
  }
}

.cell-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 15rpx;
}

.cell-title {
  font-weight: 500;
  color: inherit;
}

.cell-value {
  color: #999;
}

/* 底部操作按钮 */
.action-container {
  position: fixed;
  bottom: 60rpx;
  left: 0;
  right: 0;
  padding: 0 40rpx;
}

.custom-button {
  height: 90rpx;
  border-radius: 45rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  letter-spacing: 2rpx;
  user-select: none;
  cursor: pointer;
  box-shadow: 0 10rpx 20rpx rgba(25, 137, 250, 0.2);
  transition: all 0.3s ease;

  &:active {
    opacity: 0.9;
    transform: scale(0.98);
  }

  .btn-text {
    margin-left: 10rpx;
    color: white;
  }
}

.btn-primary {
  background-color: var(--theme-color);
  box-shadow: 0 10rpx 20rpx var(--theme-color-shadow, rgba(1, 141, 113, 0.2));
}

.btn-error {
  background-color: #ff4d4f;
  box-shadow: 0 10rpx 20rpx #ff4d4f33;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.user-card,
.function-section {
  animation: fadeIn 0.5s ease-out forwards;
}

.function-section:nth-child(2) {
  animation-delay: 0.1s;
}
</style>
